<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东个人中心 赵佳义</title>
		<link rel="stylesheet" type="text/css" href="个人中心.css"/>
		<script src="scripts/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="scripts/消费记录.js"></script>
		<script src="scripts/幸运抽奖.js"></script>
		<script type="text/javascript">
			$(function(){
				//操作左侧菜单样式
				//1.点击我的订单
				$('#orderLink').click(function(){
					$(this).addClass('selected'); //向被选中的元素添加类
					//移除另外两个selected类
					$('#recordLink').removeClass('selected');
					$('#lotteryLink').removeClass('selected');
					
					//操作右侧内容部分的显示或隐藏
					$('#orderContent').show(); //点击第一个，剩余两个隐藏
					$('#recordContent').hide();
					$('#lotteryContent').hide();
				})
				// 2.点击消费记录
				$('#recordLink').click(function(){
					$(this).addClass('selected'); //向被选中的元素添加类
					//移除另外两个selected类
					$('#orderLink').removeClass('selected');
					$('#lotteryLink').removeClass('selected');
					
					//操作右侧内容部分的显示或隐藏
					$('#recordContent').show(); //点击第一个，剩余两个隐藏
					$('#orderContent').hide();
					$('#lotteryContent').hide();
				})
				// 3.点击抽奖菜单
				$('#lotteryLink').click(function(){
					$(this).addClass('selected'); //向被选中的元素添加类
					//移除另外两个selected类
					$('#orderLink').removeClass('selected');
					$('#recordLink').removeClass('selected');
					
					//操作右侧内容部分的显示或隐藏
					$('#lotteryContent').show(); //点击第一个，剩余两个隐藏
					$('#orderContent').hide();
					$('#recordContent').hide();
				})
				// 消费记录绘图
				//定义绘制曲折线的关键数据（12个数据，代表的是金额）
				//封装一个函数，用来绘制折线图
				//用一个方法实现功能recordPaint（画布传入canvas，data）
				var datas=[1200,400,3000,500,200,800,1800,2200,2600,1000,600,300];
				recordPaint($('#recordCvs')[0],datas);
				
				//幸运抽奖
				var start=runLottery($("#lotteryCvs")[0]);
				// 点击按钮调用start方法
				$("#btnLottery").click(function(){
					
					start();
				})
			})
			
			
		</script>
	</head>
	<body>
		<!-- 页面顶部 -->
		<div id="nav">
			<div class="w">
				<div class="logo">
					<!-- logo 我的京东 返回京东首页 -->
					<a href="#" id="e1"></a>
					<a href="#" id="e2">我的京东</a>
					<a href="#" id="e3">返回京东首页</a>
				</div>
			</div>
		</div>
		<!-- 页面主体内容 -->
		<div id="container">
			<div id="w">
				<dl id="playlist">
					<dt>我的京东</dt>
					<dd><a href="#" id="orderLink" class="selected">我的订单</a></dd>
					<dd><a href="#" id="recordLink">消费记录</a></dd>
					<dd><a href="#" id="lotteryLink">幸运抽奖</a></dd>
				</dl>
				<!-- 右侧区域内容 -->
				<div id="content">
					<!-- 1.我的订单部分 -->
					<div id="orderContent">
						<table id="orderList" width="100%">
							<tr>
								<th width="50%">订单信息</th>
								<th width="10%">收货人</th>
								<th width="10%">订单金额</th>
								<th width="10%">
									<select id="orderTime">
										<option value ="1">最近三个月</option>
										<option value ="2">今年内</option>
										<option value ="3">2024年</option>
										<option value ="4">2023年</option>
										<option value ="5">2022年</option>
										<option value ="6">2022年以前</option>
									</select>
								</th>
								<th width="10%">
									<select id="orderStatus">
										<option value ="1">全部状态</option>
										<option value ="2">等待付款</option>
										<option value ="3">等待自提</option>
										<option value ="4">等待收获</option>
										<option value ="5">已完成</option>
										<option value ="6">已取消</option>
									</select>
								</th>
								<th width="10%">操作</th>
							</tr>
							<!-- 第一个订单 第二行 -->
							<tr class="trOrder">
								<td colspan="6">
									<span>订单编号：954570796</span>
									<span><a href="#">BROWNE FOX旗舰店</a></span>
								</td>
							</tr>
							<!-- 第三行 -->
							<tr class="trProd">
								<td>
									<div class="imgList">
										<a href="#">
											<img src="images/prod1.jpg" width="50" height="50">
										</a>
									</div>
								</td>
								<td>aaa</td>
								<td>￥21.9<br>在线支付</td>
								<td>2015-06-09<br>13:14:20</td>
								<td>已完成</td>
								<td>
									<a href="#">查看</a>|
									<a href="#">删除</a>|
									<a href="#">评价晒单</a>|
									<a href="#">还要买</a>
								</td>
							</tr>
							<!-- 第二个 第四行 -->
							<tr class="trOrder">
								<td colspan="6">
									<span >订单编号：954570797</span>
									<span><a href="#">BROWNE FOX旗舰店</a></span>
								</td>
							</tr>
							<!-- 第五行 -->
							<tr class="trProd">
								<td>
									<div class="imgList">
										<a href="#">
											<img src="images/prod2.jpg" width="50" height="50">
										</a>
									</div>
								</td>
								<td>bbb</td>
								<td>￥6.9<br>在线支付</td>
								<td>2015-06-17<br>13:14:20</td>
								<td>已完成</td>
								<td>
									<a href="#">查看</a>|
									<a href="#">删除</a>|
									<a href="#">评价晒单</a>|
									<a href="#">还要买</a>
								</td>
							</tr>
							<!-- 第三个 第六行 -->
							<tr class="trOrder">
								<td colspan="6">
									<span >订单编号：954570798</span>
									<span><a href="#">BROWNE FOX旗舰店</a></span>
								</td>
							</tr>
							<!-- 第七行 -->
							<tr class="trProd">
								<td>
									<div class="imgList">
										<a href="#">
											<img src="images/prod3.jpg" width="50" height="50">
										</a>
									</div>
								</td>
								<td>ccc</td>
								<td>￥59.99<br>在线支付</td>
								<td>2015-06-09<br>13:14:20</td>
								<td>已完成</td>
								<td>
									<a href="#">查看</a>|
									<a href="#">删除</a>|
									<a href="#">评价晒单</a>|
									<a href="#">还要买</a>
								</td>
							</tr>
						</table>
					</div>
				    <!-- 2.消费记录部分 -->
					<div id="recordContent">
						<canvas id="recordCvs" width="600" height="400">
							您的浏览器不支持canvas
						</canvas>
					</div>
					<!-- 3.幸运抽奖部分 -->
					<div id="lotteryContent">
						<canvas id="lotteryCvs" width="500" height="500"></canvas>
						<button id="btnLottery">开始抽奖</button>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			网络文化经营许可证京网文[2011]0168-061号 Copyright &copy;2004-2015 京东JD.com 版权所有
			<br>
			京东旗下网站：English Site
		</div>
	</body>
</html>
